<template>
	<view class="page-body paround40">
		<view class="h2">填写账户信息</view>
		<view class="textcode flex ">
			<text>您的账户</text>
			<input class="flex1" type="number" maxlength="11" placeholder-style="color:#c7c7c7"  v-model="usermobile" disabled />
		</view>
		<view class="textcode flex ">
			<text>姓名</text>
			<input class="flex1" type="text" placeholder="请输入真实姓名"  maxlength="23" placeholder-style="color:#c7c7c7" @input="inputName" v-model="username" />
		</view> 
		<view class="textcode flex">
			<text>身份证</text>
			<input class="flex1" type="idcard" placeholder="请输入身份证号"  placeholder-style="color:#c7c7c7" @input="inputidcard" v-model="idCardNum" />
		</view> 
		<!--银行卡号  -->
		<view class="textcode flex ">
			<text class="flex0">银行卡号</text>
			<input class="flex1" type="text" placeholder="输入绑定的银行卡号"  maxlength="23" placeholder-style="color:#c7c7c7" @input="inputCard" v-model="bankcard" />
		</view>
		<!-- 银行名称 -->
		<view class="bankname flex" :class="{'slideup':hasbank}">
			<!-- <image :src="bankurl"></image> -->
			<view class="bankimg" :style="'background-position:'+bankposition"></view>
			<text>{{inputbankName}}</text>
		</view>
		<!-- 手机号码 -->
		<view class="textcode flex">
			<text class="flex0">预留手机号码</text>
			<input class="flex1" type="number" placeholder="请输入银行预留手机号"  maxlength="11" placeholder-style="color:#c7c7c7" @input="bindChange" />
		</view>
		<!-- 短信验证码 -->
		<view class="textcode flex" :class="{'warn':isWrong}">
			<text class="flex0">验证码</text>
			<input class="flex1" maxlength="6" type="number" placeholder="短信验证码" v-model="textcode" placeholder-style="color:#c7c7c7" @input="bindCode" />
			<view :class="['btn btn-getcode flex0',isDisabledCode?'disabled':'']" @click="resendCode">{{cdNum}}</view>
		</view>
		<view class="warntip" :style="{'height':isWrong?'70upx':'0'}">{{warntext}}</view>
		<view :class="['button',isNextStep?'primary':'disabled']" :disabled="!isNextStep" @click="nextStep">下一步</view>
		<!-- <view class="tip-p" @click="open">查看支持银行/限额说明 <w-icon type="more" size="14" color="#2462ed"></w-icon></view> -->
		
		<!-- 支持银行卡弹框 -->
		<view :class="['state flex',isPopout?'fadein':'']" >
		    <view class="mask" @click="close"></view>
		    <view class="body">
		        <view class="cont bankstate">
					<view class="h3">支持银行限额说明</view>
					<scroll-view scroll-y style="height:600upx">
						<view class="flex li-bank" v-for="(item, i) in bank" :key="i">
							<view class="img"></view>
							<view class="right">
								<view class="h5">{{item.name}}</view>
								<view class="p">单笔{{item.one_limit}}，单日{{item.day_limit}}</view>
							</view>
						</view>
					</scroll-view>
					<view class="btn" @click="close">知道了</view>
				</view>
		    </view>
		</view>
		<!-- 提示 -->
		<view :class="['state state2 flex',isPopout2?'fadein':'']" >
			<view class="mask" @click="close"></view>
			<view class="body">
				<view class="cont ">
					<view class="h3">温馨提示</view>
					<view class="p">此银行卡为<text class="bn">{{inputbankName}}</text>暂不支持绑卡充值，详情查看<text @click="open">《支持绑卡银行列表》</text>！</view>
					<view class="btn-row-more">
						<view class="btn flex1" @click="close">取消</view>
						<view class="btn flex1" @click="besure">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	import {
	    mapState,
	    mapMutations
	} from 'vuex'	
	import {isPoneAvailable,trim,TimeStorage} from '@/utils/utils.js';
	import {banksList} from '@/common/js/banklist.js';
	import {bankcon} from '@/common/js/bankcon.js'
	
	export default{
		data(){
			return{
				bank:bank,
				cdNum:"获取验证码",
				isDisabledCode:true,
				phoneNum:"",
				textcode:"",
				isNextStep:false,
				bankcard:"",//银行卡号码
				cardNum:"",//银行卡号码（去除空格）
				isWrong:false,
				warntext:"",
				isPopout:false,
				isPopout2:false,
				inputbankName:"",
				bankurl:"/static/img/bank/ccb.png",
				bankposition:"0 0",
				hasbank:false,
				
				bankbg:"",
				username:"",
				idCardNum:"",
				token:""
			}
		},
		computed:mapState({
			usermobile(state){
				let usermobile = state.usermobile || TimeStorage.geted('mobile') ;
				usermobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
				return usermobile
			}
		}),
		methods:{
			inputName(e){
				let value=e.detail.value;
				let idCardNum=this.idCardNum;
				
				this.checkIsNextStep()
			},
			inputidcard(e){
				let value=e.detail.value;
				this.checkIsNextStep()
			},
			inputCard(e){
				let value=e.detail.value;
				setTimeout(()=>{
					that.bankcard=value.replace(/[^\d]/g,'').replace(/([\d]{4})(?=\d)/g,'$1 ')//银行卡格式
					let cardNum=trim(value,'g');
					that.cardNum=cardNum;
					if(cardNum.length<3){
						that.clearbank()
					}
					
						var curNum = cardNum.substr(0,6);
						let bankMsg=banksList.find((item,index)=>{//根据前六位数判定对应银行
							return curNum.includes(item.num)
						})
						
						if(bankMsg){
							that.inputbankName=bankMsg.name;
							// 根据名称判断是否是支持的银行
							let supportbank=bankcon.find((item,index)=>{
								return item.name==bankMsg.name
							})
							if(supportbank){
								that.bankposition=supportbank.iconurl;
								that.hasbank=true;
							}else{
								that.isPopout2=true;
								that.hasbank=false
							}
						}else{
							that.clearbank()
						}
					if(cardNum.length>6){
						if(!that.hasbank){
							uni.showToast({
								icon:"none",
								title:"请输入正确的银行卡号",
								position:'top'
							})
						}
					}
				},0)
			},
			bindChange(e){
				let value=e.detail.value;
				this.phoneNum=value;
				//验证码框
				if(isPoneAvailable(value)){
					this.isDisabledCode=false
					this.checkIsNextStep()
				}else{
					this.isDisabledCode=true
				}
			},
			bindCode(e){
				let value=e.detail.value;
				let phoneNum=this.phoneNum;

				if(value.length==6){
					this.checkIsNextStep()
					// 校验验证码
					this.textcode=value;
				}
			},
			resendCode(){
				//接口请求验证码
				this.checkData()
				let isPass = this.checkData();
				if(!isPass) return;
				uni.showLoading({
					title:"验证码发送中"
				})
				this.$https.POST({
					url:'/pay/openacctApplyIndividual',
					data:{
						user_name:that.username,
						id_no:that.idCardNum,
						linked_acctno:that.cardNum,
						linked_phone:that.phoneNum,
						linked_name:that.inputbankName
					},
					success(res){
						uni.hideLoading()
						that.token = res.data.token
						uni.showToast({
							title:"动态验证码发送成功",
							icon:"none"
						})
						countBackwards()
					},
					showfailsure(res){
						uni.hideLoading()
						clearInterval(clock);
					}
				})
			},
			nextStep(){
				// uni.navigateTo({
				// 	url:"/pages/user/SAM/openaccount/setpayword?textcode="+textcode+"&token="+token
				// })
				// return
				this.checkData()
				let isPass = this.checkData();
				if(!isPass) return;
				let textcode = this.textcode;
				if(textcode.length!=6){
					this.$showToast('请填写验证码')
					return
				}
				let token = this.token;
				if(this.isNextStep){
					uni.navigateTo({
						url:"/pages/user/SAM/openaccount/setpayword?textcode="+textcode+"&token="+token
					})
				}
			},
			checkData(){
				let isPass = true
				let username = this.username;
				let idCardNum = this.idCardNum;
				let hasbank=this.hasbank;
				let cardNum=this.cardNum;
				let phoneNum=this.phoneNum;
				if(username==""){
					this.$showToast("请填写真实姓名");
					isPass = false;
				}
				let msg=checkIdCard(idCardNum);
				if(msg!==true){
					this.$showToast(msg)
					isPass = false;
				}
				if(!hasbank){
					this.$showToast("银行卡号填写有误");
					isPass = false
				}
				if(hasbank){
					if(cardNum.length<16||cardNum.length>19){
						this.$showToast("银行卡号长度必须在16到19之间")
						isPass = false
					}
				}
				if(!isPoneAvailable(phoneNum)){
					this.$showToast("手机号码填写有误")
					isPass = false
				}
				return isPass
			},
			checkIsNextStep(){
				if(!isPoneAvailable(this.phoneNum)||this.textcode==""||!this.hasbank||this.username==""||!checkIdCard(this.idCardNum)){
					this.isNextStep=false
				}else{
					this.isNextStep=true
				}
			},
			open(){
				this.isPopout=true;
				this.isPopout2=false;
			},
			close(){
				this.isPopout=false
				that.isPopout2=false
			},
			besure(){
				this.clearbank()
				this.cardNum="";
				this.bankcard=""
				that.isPopout2=false
			},
			clearbank(){
				that.inputbankName="";
				that.hasbank=false;
			},
		},
		onLoad(options){
			that=this;
		},
		onShow(options){
			uni.$on('backpress',function(){
				that.textcode = ""
			})
		},
		onUnload(){
			clearInterval(clock);
		},
		watch: {
		    bankcard (newValue, oldValue) {

			}
		}
	}
      function checkBank(curnum) {
            var jsonNum = bankList.length;
            var curNum = curnum.substr(0,6);
            var reg = new RegExp("^(" + curNum + ")","g");
            if(curNum.length < 3){
                rightBank = '';
            }
            if(curNum.length >= 3 && curNum.length <= 6){
                for (var i = 0, j = 0; i < jsonNum; i++) {
                    if (reg.test(bankList[i].num) && bankList[i].num.length == curNum.length) {
                        rightBank = bankList[i].name;
                    }
                }
            }
            if(curNum.length < 6){
                rightBank = '';
                bank_name = '';
            }else{
                if(rightBank == ''){
                    bank_name = '';
                }else{
                    bank_name = rightBank;
                    var is_insupport = false;
                    for(var n = 0; n < support.length; n++){
                        if(rightBank === support[n]){
                            is_insupport = true;
                        }
                    }
                    if(!is_insupport){
                        $('.graycover,.popupbox.binding').show();
                    }
                }
            }
			return rightBank;
        }
		// 1分钟倒计时
	var clock;
	function countBackwards() {
	    let nums = 59;
	    let isDisabled = true;
	    let vertifyCode = nums + 's';
	    that.cdNum=vertifyCode;
		that.isDisabledCode=isDisabled;
	    clock = setInterval(function () {
	        nums--;
			// console.log(nums)
	        if (nums > 0) {
	            vertifyCode = nums + 's';
	        } else {
	            clearInterval(clock);
	            isDisabled = false;
	            vertifyCode = '重发验证码';
	            nums = '59'
	        }
	        that.cdNum=vertifyCode;
			that.isDisabledCode=isDisabled
	        // console.log(nums)
	    }, 1000)
	}
	function checkIdCard(code){
		var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
		var tip = "";
		var pass = true;
		if (code.length != 18) {
			tip = "仅支持二代身份证";
			pass = false;
		}else if(!city[code.substr(0,2)]){
			tip = "身份证号码错误";
			pass = false;
		}
		if(!pass){
			return tip;
		}else{
			return pass;
		}
	}
	var bank=[{
		name:"工商银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"农业银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"中国银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"建设银行",
		one_limit:"5万",
		day_limit:"20万"
	},
	{
		name:"交通银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"中信银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"光大银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"华夏银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"民生银行",
		one_limit:"5万",
		day_limit:"20万"
	},
	{
		name:"广发银行",
		one_limit:"5万",
		day_limit:"20万"
	},{
		name:"平安银行",
		one_limit:"5万",
		day_limit:"20万"
	},
	{
		name:"招商银行",
		one_limit:"5万",
		day_limit:"20万"
	},
	{
		name:"兴业银行",
		one_limit:"5万",
		day_limit:"20万"
	},
	{
		name:"浦发银行",
		one_limit:"5万",
		day_limit:"20万"
	}
	]
</script>

<style lang="scss" scoped="">
	$border-color:#dfdfdf;
	@import '../../../../static/css/user.css';
	.textcode{border-bottom: 1px solid #e9e9e9;height:112upx;}
	.textcode text{font-size: 28upx;width: 180upx;}
	.button{margin-top: 80upx;}
	.tip-p{text-align: center;margin-top:40upx;color: #2462ed;}
	.bankname{font-size: 26upx;color: #535970;height: 0;overflow: hidden;transition: all .3s linear;line-height: 60upx;}
	.bankname image,.bankname .bankimg{width:32upx ;height:32upx ;margin-right: 8upx;}
	.bankname .bankimg{background: url(/static/img/bank/bankcon.png) no-repeat 0px 0px/100% auto;}
	.bankname.slideup{height: 60upx;padding-top:10upx; }
	.warn{border-bottom-color:#ff6361; }
	.warntip{color: #ff6361;font-size: 24upx;line-height: 70upx;height: 70upx;transition: height .3s linear;overflow: hidden;}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			padding:0 20upx 30upx;
			overflow: hidden;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 32upx;text-align: center;font-weight: bold;}
		.p{font-size: 24upx;color: #b8becc;line-height: 32upx;padding-top: 10upx;}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; }
		.bankstate{
			padding: 0 0 30upx;
			.li-bank{border-bottom: 1px solid #eee;height: 100upx;}
			.img{width: 100upx;height: 50upx;background: url(/static/img/bank/bankcon.png) no-repeat center 0/50% auto;}
			.li-bank:nth-of-type(1) .img{background-position:center 0; }
			.li-bank:nth-of-type(2) .img{background-position:center -84upx; }
			.li-bank:nth-of-type(3) .img{background-position:center -170upx; }
			.li-bank:nth-of-type(4) .img{background-position:center -252upx; }
			.li-bank:nth-of-type(5) .img{background-position:center -340upx; }
			.li-bank:nth-of-type(6) .img{background-position:center -422upx; }
			.li-bank:nth-of-type(7) .img{background-position:center -496upx; }
			.li-bank:nth-of-type(8) .img{background-position:center -588upx; }
			.li-bank:nth-of-type(9) .img{background-position:center -670upx; }
			.li-bank:nth-of-type(10) .img{background-position:center -770upx; }
			.li-bank:nth-of-type(11) .img{background-position:center -863upx; }
			.li-bank:nth-of-type(12) .img{background-position:center -960upx; }
			.li-bank:nth-of-type(13) .img{background-position:center -1059upx; }
			.li-bank:nth-of-type(14) .img{background-position:center -1159upx; }
		}
		
	}
	.state2{
		.cont{
			padding: 0;
			text-align: center;
		}
		.p{
			color: #a9b0c0;font-size: 26upx;line-height:40upx;padding: 0 20upx;
			.bn{color: #666d83;font-weight: bold;padding: 0 4upx;}
			text:nth-of-type(2){color: #2462ed;}
		}
		.btn-row-more{
			padding: 0;border-top: 1px solid $border-color; margin-top:35upx; 
			.btn{height: 88upx;line-height: 88upx;text-align: center;color: #a9b0c0;background: #fff;border-radius: 0;margin-top:0; }
			.btn:nth-of-type(1){border-right: 1px solid $border-color;color: #a9b0c0;}
		}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
</style>
